<template>
  <div class="banner">
    <swiper ref="mySwiper" class="swiper" :options="swiperOptions">
      <swiper-slide class="swiper-slide1 swiper-slide">
        <img src="http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/banner1.png-1593653904000" alt="" />
        <div class="content1">
          <div class="topbox">
            <div>10</div>
            <div>年</div>
          </div>
          <div class="bottombox">
            <div>专注企业渠道建设</div>
            <div>引领5G招商新时代</div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="swiper-slide2 swiper-slide">
        <img src="http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/banner2.png-1593653923000" alt="" />
        <div class="content">
          <div class="title">一站式招商解决方案定制服务商</div>
          <div class="subtitle">
            One-stop investment promotion solution customization service
            platform
          </div>
          <div class="btnwarp">
            <div class="btn">创新求变</div>
            <div class="btn">重塑增效</div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="swiper-slide3 swiper-slide">
        <img src="http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/banner3.png-1593683618000" alt="" />
        <div class="content">
          <div class="title">
            <p>招商APP</p>
            <p>中小企业渠道建设的首选</p>
          </div>
          <div class="subtitle">
            <div class="topbox">
              <div class="item">
                <img src="/image/home/swiper.png" alt="" />
                <span>招商系统定制</span>
              </div>
              <div class="item">
                <img src="/image/home/swiper1.png" alt="" />
                <span>项目内容定制</span>
              </div>
            </div>
            <div class="bottombox">
              <div class="item">
                <img src="/image/home/swiper2.png" alt="" />
                <span>新招商流程定制</span>
              </div>
              <div class="item">
                <img src="/image/home/swiper3.png" alt="" />
                <span>管理体系定制等</span>
              </div>
            </div>
          </div>
          <div class="btn">了解更多</div>
        </div>
      </swiper-slide>
      <swiper-slide class="swiper-slide4 swiper-slide">
        <img src="http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/banner4.png-1593683622000" alt="" />
        <div class="content">
          <div class="title">成为中小企业的助推器</div>
          <div class="subtitle">
            <p>在线招商</p>
            <p>降低企业招商成本 提升运营效率</p>
          </div>
          <div class="btn">欢迎来电咨询</div>
        </div>
      </swiper-slide>
      <swiper-slide class="swiper-slide5 swiper-slide">
        <img src="http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/banner5.png-1593683624000" alt="" />
        <div class="content">
          <div class="title">数据管控系统</div>
          <div class="subtitle">费用管控服务解决方案</div>
          <div class="btn">
            <span>了解更多</span><img src="/image/home/play.png" alt="" />
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="swiper-slide6 swiper-slide">
        <img src="http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/banner6.png-1593653965000" alt="" />
        <div class="content">
          <div class="title">招商商学院</div>
          <div class="subtitle">
            为企业快速打造招商尖兵团队
          </div>
          <div class="btn">免费培训5名招商人员</div>
        </div>
      </swiper-slide>
      <swiper-slide class="swiper-slide7 swiper-slide">
        <img src="http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/banner7.png-1593683627000" alt="" />
        <div class="content">
          <div class="title">同战疫情 共渡难关</div>
          <div class="subtitle">
            使用招商APP系统,助力企业随时随地召开线上项目招商会
          </div>
          <div class="btn">查看详情</div>
        </div>
      </swiper-slide>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        initialSlide: 0,
        direction: "horizontal",
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        loop: true,
        slidesPerView: "auto",
        loopedSlides: 3,
        loopAdditionalSlides: 0,
        slidesPerView: 1,
        observer: true,
        observeParents: true
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
  }
};
</script>
<style lang="scss" scoped>
.banner,
.swiper-container,
.swiper-container img {
  height: 100%;
  width: 100%;
}
.swiper-slide {
  position: relative;
}
.content {
  position: absolute;
}
.swiper-slide1 {
  .content1 {
    position: absolute;
    width: 100%;
    bottom: 95px;
    left: 0;
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: center;
    .topbox {
      display: flex;
      align-items: flex-start;
      & > div:first-of-type {
        font-size: 137px;
        font-family: Impact;
        font-weight: 400;
      }
      & > div:last-of-type {
        line-height: 88px;
        font-size: 36px;
        font-weight: 400;
      }
    }
    .bottombox {
      & > div:first-of-type {
        font-size: 59px;
        font-weight: bold;
        text-shadow: 0px 1px 3px rgba(0, 39, 89, 0.5);
      }
      & > div:last-of-type {
        font-size: 39px;
        font-weight: bold;
      }
    }
  }
}
.swiper-slide2 {
  .content {
    top: 45%;
    left: 30%;
  }
  .title {
    font-size: 57px;
    font-weight: 800;
    color: rgba(255, 255, 255, 1);
  }
  .subtitle {
    margin-top: 6px;
    font-size: 17px;
    font-weight: 300;
    font-style: italic;
    color: rgba(255, 255, 255, 1);
  }
  .btnwarp {
    margin-top: 32px;
    display: flex;
    .btn {
      text-align: center;
      line-height: 51px;
      font-size: 27px;
      font-weight: 400;
      width: 179px;
      height: 51px;
      border-radius: 2px;
    }
    & > div:first-of-type {
      color: rgba(2, 42, 98, 1);
      background: rgba(255, 255, 255, 1);
    }
    & > div:last-of-type {
      margin-left: 18px;
      border: 1px solid rgba(155, 179, 226, 1);
      color: rgba(255, 255, 255, 1);
    }
  }
}
.swiper-slide3 {
  .content {
    top: 35%;
    left: 20%;
  }
  .title {
    font-size: 42px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    line-height: 59px;
  }
  .subtitle {
    margin-top: 60px;
    font-size: 16px;
    font-weight: 400;
    color: rgba(240, 243, 242, 1);
    line-height: 24px;
    .item {
      display: flex;
      align-items: center;
      width: 186px;
    }
    .topbox {
      display: flex;
      & > div:first-of-type {
        img {
          width: 33px;
          height: 37px;
          margin-right: 15px;
        }
      }
      & > :last-of-type {
        img {
          width: 39px;
          height: 33px;
          margin-right: 22px;
        }
      }
    }
    .bottombox {
      display: flex;
      margin-top: 25px;
      & > div:first-of-type {
        img {
          width: 28px;
          height: 31px;
          margin-right: 18px;
        }
      }
      & > :last-of-type {
        img {
          width: 34px;
          height: 40px;
          margin-right: 25px;
        }
      }
    }
  }
  .btn {
    margin-top: 49px;
    width: 130px;
    height: 41px;
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 7px;
    font-size: 17px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    line-height: 41px;
  }
}
.swiper-slide4 {
  .content {
    top: 40%;
    left: 18%;
  }
  .title {
    font-size: 47px;
    color: rgba(255, 255, 255, 1);
  }
  .content {
    p:first-of-type {
      margin-top: 50px;
      font-size: 34px;
      color: rgba(255, 255, 255, 1);
    }
    p:last-of-type {
      margin-top: 6px;
      font-size: 19px;
      color: rgba(255, 255, 255, 1);
    }
  }
  .btn {
    margin-top: 26px;
    width: 195px;
    height: 51px;
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 16px;
    font-size: 20px;
    text-align: center;
    line-height: 51px;
    color: rgba(255, 255, 255, 1);
  }
}
.swiper-slide5 {
  .content {
    top: 35%;
    left: 20%;
  }
  .title {
    font-size: 51px;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }
  .subtitle {
    margin-top: 28px;
    font-size: 23px;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
  }
  .btn {
    margin-top: 32px;
    display: flex;
    width: 145px;
    height: 46px;
    background: rgba(255, 255, 255, 1);
    border-radius: 7px;
    font-size: 19px;
    font-weight: 400;
    color: rgba(1, 8, 37, 1);
    justify-content: center;
    align-items: center;
    img {
      width: 19px;
      margin-left: 5px;
      height: 19px;
    }
  }
}
.swiper-slide6 {
  .content {
    top: 40%;
    left: 20%;
  }
  .title {
    font-size: 71px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.35);
  }
  .subtitle {
    margin-top: 10px;
    font-size: 38px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
  }
  .btn {
    margin-top: 40px;
    width: 281px;
    height: 59px;
    border: 1px solid rgba(155, 179, 226, 1);
    border-radius: 9px;
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    line-height: 59px;
  }
}
.swiper-slide7 {
  .content {
    top: 66%;
    left: 20%;
  }
  .title {
    font-size: 47px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    line-height: 55px;
    background: linear-gradient(
      0deg,
      rgba(255, 83, 80, 1) 0.3662109375%,
      rgba(255, 185, 36, 1) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .subtitle {
    margin-top: 22px;
    font-size: 19px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    line-height: 22px;
  }
  .btn {
    margin-top: 24px;
    font-size: 19px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    width: 144px;
    height: 41px;
    background: linear-gradient(
      102deg,
      rgba(255, 83, 80, 1),
      rgba(255, 185, 36, 1)
    );
    border-radius: 7px;
    text-align: center;
    line-height: 41px;
  }
}
</style>
